//登录组件
import React from 'react'
import './RegisterForm.css'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, message, Space} from 'antd';
import { useNavigate } from 'react-router-dom'
import { usePostregisterMutation } from '../../store/request/registerrequest';
const RegisterForm = () => {

    const navigate = useNavigate()
    const [messageApi, contextHolder] = message.useMessage();
    const [trigger] = usePostregisterMutation();
    const messageerror = () => {
        messageApi.open({
            type: 'error',
            content: '注册失败',
        });
    };
    const messagesucess = () => {
        messageApi.open({
            type: 'success',
            content: '注册成功,正在进行跳转！',
        });
    };
    const onFinish = async (values) => {
        //console.log('Received values of form: ', values);

        if (values.password === values.password2) {
            //这个时候虽然调用了setLoginState的函数，但这时候组件还没有重新渲染，所以state里面的值还是原来的值
            //直到return后面的代码才改了state里面的值。所以useState的值一般用于页面渲染，不用与之前的逻辑判断，因为这个时候值还没有发生改变
            delete values.password2;
            values.authoritykey = 1;

            //console.log('Received values of form: ', values);
            const r = await trigger(values);

            if (r.error.originalStatus === 200) {
                messagesucess();
                setTimeout(() => {
                    navigate("/dataworks/login", { replace: true });
                }, 1000); // 延迟1秒执行navigate跳转
                // navigate("/IMS/login", { replace: true })
            }
            else {
                messageerror();
            }

        }
        else {
            messageerror();
        }

    };

    const pressLoginOnclick = () => {

        navigate("/dataworks/login", { replace: true });

    };
    return (
        <>
            {contextHolder}
            <div className='register'>

                <div className='form'>
                    <Space
                        direction="vertical"
                        size="middle"
                        style={{
                            display: 'flex',
                        }}
                    >
                         <p className='title'>大数据处理系统</p>
                        <Form
                            name="normal_login"
                            className="login-form"
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={onFinish}
                        >

                            <Form.Item
                                name="loginname"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入用户名!',
                                    },
                                ]}
                            >
                                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入密码!',
                                    },
                                ]}
                            >
                                <Input
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    type="password"
                                    placeholder="密码"
                                />
                            </Form.Item>
                            <Form.Item
                                name="password2"
                                rules={[
                                    {
                                        required: true,
                                        message: '请再次输入密码!',
                                    },
                                ]}
                            >
                                <Input
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    type="password"
                                    placeholder="重复密码"
                                />
                            </Form.Item>

                            <Form.Item>
                                <Button type="primary" danger htmlType="submit" className="login-form-button">
                                    注册
                                </Button>

                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" onClick={pressLoginOnclick} htmlType="submit" className="login-form-button">
                                    去登录
                                </Button>

                            </Form.Item>
                        </Form>

                    </Space>

                </div>

            </div>
        </>


    )
}

export default RegisterForm
